<template>
  <div>
    <keep-alive>
      <div class="header">
        <div class="systemtitle">
          <img src="/static/image/LOGO.jpg" alt="">
        </div>
        <ul class="head-nav">
          <router-link :to="items.path" tag="li" class="activeitem" :class="items.active" v-for="(items,index) in navList" :key="index" >
            {{items.label}}
            <ul class="itemli" v-if="items.isT">
              <router-link :to="item.path" tag="li"  v-for="(item,inx) in items.children" :key="inx">{{item.label}}</router-link>
            </ul>
          </router-link>
        </ul>
         <el-dropdown>
      <span class="el-dropdown-link">
        <img src="/static/image/avator.png" alt="" class="avator"> 个人中心<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
      </div>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: "header-common",
  data() {
    return {
     navList:[
       {label:'首页',active:'active',isT:false,path:'/home'},
       {label:'课程学习',active:'',isT:false,path:'/typeCheck'},
       {label:'错题本',active:'',isT:false,path:'/WrongBook'},
       {label:'智能点评',active:'',isT:true,path:'/IntelligentComments',
        children:[
          {label:'学习点评',active:'a',isT:false,path:'/LearningComments'},
          {label:'智能测评',active:'a',isT:false,path:'/eoid'}
        ]
       },
       {label:'校企合作',active:'',isT:false,path:'/Schoolcooperation'},
       {label:'关于我们',active:'',isT:false,path:'/about'},
     ]
    };
  },
  mounted() {
    console.log(this.Path());
  },
  updated(){

  },
  watch:{
    "$route"() {
      // 获取当前路径
      let path = this.$route.path;
      // 检索当前路径
      this.Path(path);
    }
  },
  methods:{
    Path(path = '/home'){
      console.log(path);
      const pathList = [
        {path:['/home']},
        {path:['/subjectLearn/:id','/typeCheck','/LearnContent/1','/LearnContent/2','/LearnContent/3','/video']},
        {path:['/WrongBook','/Wrongs/:id','/WrongsInfo/:id','/courseInfo/:id']},
        {path:['/IntelligentComments','/LearningComments','/eoid']},
        {path:['/Schoolcooperation']},
        {path:['/about']},
      ];
      pathList.forEach((items,index)=>{
        items.path.forEach((it,inx)=>{
          if(path.split('/')[1] == it.split('/')[1]){
            console.log(index)
            this.navList.forEach((v,i)=>{
              if(index == i){
                v.active = 'active'
              }else{
                v.active = ''
              }
            })
          }
        })
      })

    },	  
  }
};
</script>
<style lang="less" scoped>
  .header{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    .el-dropdown{position: absolute;right: 0;top: 35px;height: 36px;line-height:36px;cursor: pointer;
      .avator{display: inline-block;width: 40px;height: 40px;border-radius: 100%; margin-right: 5px;vertical-align:middle;}
    }
    .systemtitle{width: 400px;height: 100%;;overflow: hidden;padding-top:20px;padding-bottom:10px;
      img{width: 100%;height: 100%;}
    }
    .head-nav{position: absolute;right: 150px;top: 30px; display: flex;border: 1px solid #ca0000;border-radius: 16px;overflow: visible;
      .activeitem{padding: 15px;font-size: 16px;color: rgb(0, 0, 0);position: relative;
        &:first-child{border-radius: 16px 0 0 16px}
        &:last-child{border-radius: 0 16px 16px 0}
        &.router-link-active{
          background-color: #ca0000;color: #fff;
          overflow: hidden;
        }
        .itemli{width: 94px;position: absolute;left: 0;top: 51px;z-index: 111;display: none;
          li{width: 100%;padding: 15px;color: rgb(0, 0, 0)}
          li:hover{color: #ca0000;}
        }
      }
      .active{background-color: #ca0000!important;color: #fff;}
      .activeitem:hover{background-color: #ca0000;color: #fff;cursor: pointer;
        .itemli{display: block;background-color: #fff;border-radius: 0 0 6px 6px;}
      }
    }

  }
</style>

